<template>
  <div class="wrapper">
    <div class="zh-chart">
      <div class="title">
        <span>学习记录</span>
        <el-radio-group v-model="studyDate" style="margin-bottom: 30px;">
          <el-radio-button label="day">日</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
        </el-radio-group>
      </div>
      <vue-base-echart :option="jbLineChat"></vue-base-echart>
    </div>


    <div class="zh-chart">
      <div class="title">
        <span>学习统计数据</span>
        <el-radio-group v-model="studyStaticDate" style="margin-bottom: 30px;">
          <el-radio-button label="day">日</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
        </el-radio-group>
      </div>
      <vue-base-echart :option="jbLineChat"></vue-base-echart>
    </div>
  </div>
</template>
<script>
import vueBaseEchart from "_c/vue-base-echart.vue";
import {lineChat} from "@/views/userCenterChart/charts";

export default {
  components: {vueBaseEchart},
  data(){
    return{
      studyDate:'week',
      studyStaticDate:'month',
      jbLineChat: lineChat(),
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  background: #202441;

  .zh-chart {
    width: 950px;
    height: 412px;
    background: #252B54;
  }

  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
}
</style>
